<template>
	<scroll-view
	  scroll-y="true"
	  :scroll-top="scrollTop"
	  class="match-list-container"
	  refresher-enabled="true"
	  :refresher-triggered="triggered"
	  @refresherrefresh="onRefresh"
	  @scrolltolower="onLoadMore"
	>
	<!-- <view class="match-list-container"> -->
		<view class="top-count-view">
			<view class="count-cell">
				<image src="https://static.kuaimayoupin.com/000000_kt_xcx/match-list/count_m.png" mode="aspectFit"></image>
				<view class="cell-content">
					<view class="top-title"> 男嘉宾 </view>
					<view class="people-view">
						<view class="people-count">{{matchInfo["male"] || 0}}</view>
						<view class="people-title">人</view>
					</view>
				</view>
			</view>
			<view class="count-cell">
				<image src="https://static.kuaimayoupin.com/000000_kt_xcx/match-list/count_f.png" mode="aspectFit"></image>
				<view class="cell-content">
					<view class="top-title"> 女嘉宾 </view>
					<view class="people-view">
						<view class="people-count">{{matchInfo["female"] || 0}}</view>
						<view class="people-title">人</view>
					</view>
				</view>
			</view>
			<view class="count-cell">
				<image src="https://static.kuaimayoupin.com/000000_kt_xcx/match-list/count_s.png" mode="aspectFit"></image>
				<view class="cell-content">
					<view class="top-title"> 已成功牵线 </view>
					<view class="people-view">
						<view class="people-count">{{matchInfo["match"] || 0}}</view>
						<view class="people-title">人</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="tab-scroll" scroll-x="true" >
			<view class="type-tab-view">
				<view class="type-tab-item scroll-view-item_H" v-for="item in filters" @click="clickTypeItem(item)">
					<view class="item-title" :class="{'item-title-active':getIsSelect(item['key'])}">
						{{item["title"]}}
					</view>
					<view class="item-image">
						<image v-if="getIsSelect(item['key'])" src="https://static.kuaimayoupin.com/000000_kt_xcx/match-list/tab_activity.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- <scroll-view
		  scroll-y="true"
		  :scroll-top="scrollTop"
		  class="match-list-view"
		  refresher-enabled="true"
		  :refresher-triggered="triggered"
		  @refresherrefresh="onRefresh"
		  @scrolltolower="onLoadMore"
		> -->
		<view class="match-list-view">
			<view class="list-cell" v-for="info in matchUsers" @click="clickMatchCell(info)">
				<view class="vip-mark" v-if="info['vip'] != '-1'">
					<image src="https://static.kuaimayoupin.com/000000_kt_xcx/match-list/vip_tips_1.png" mode="aspectFit"></image>
				</view>
				<view class="info-view">
					<view class="avatar-view">
						<image :src="info['avatar']" mode="aspectFill"></image>
					</view>
					<view class="right-view">
						<view class="top-view">
							<view class="nick-name">
								{{info['nick_name'] || "匿名"}}
							</view>
							<view class="age-sex-c" :class="{'age-woman-sex':info.sex == 'F'}">
								<image  class="sex-img" :src="getSexImg(info)" mode="aspectFit"></image>
								<view class="sex-title" :class="{'sex-woman-title':info.sex == 'F'}">{{getTaAges(info.birthday)}}</view>
							</view>
							<!-- <view class="sex-tag">
								{{getSexDes(info)}}
							</view> -->
							<view class="cer-tag" v-if="info['certificated']">
								<image src="https://static.kuaimayoupin.com/000000_kt_xcx/match-list/real_name.png" mode="aspectFit"></image>
							</view>
						</view>
						<view class="tags-view">
							<view class="tag-item" v-for="item in getInfoTags(info)">
								{{item}}
							</view>
						</view>
					</view>
					<view v-if="info['distance'] != undefined" class="distance-view">
						{{(Math.floor(info.distance * 100) / 100)}}km
					</view>
				</view>
				<view class="des-view">
					<view class="image-view">
						<image v-if="info.soliloquy.length > 0" src="https://static.kuaimayoupin.com/000000_kt_xcx/match-list/match_heart.png" mode="aspectFit"></image>
					</view>
					{{info.soliloquy || ""}}
				</view>
			</view>
		</view>
		<!-- </scroll-view> -->
		<view class="vip-tips" v-if="isShowVip" @click="clickToVip">
			成为VIP会员，解锁全部人员信息>
		</view>
	<!-- </view> -->
	</scroll-view>
</template>


<script>
	import {
		getActivityInfo, 
		getActivityParticipants,
	} from "@/api/activity/activity.js";
	import {
		home_bar_bg,
		paifa_icon,
		ta_sex_man,
		ta_sex_woman,
		home_auth_icon
	} from '@/pages/home2/home_image_tool.js';
	import { getAges } from "@/util/tool.js";
	
	import { EventBus } from "@/util/event-bus.js";
import { updateLocationInfo } from "../../api/user/user";
	
	export default {
		components: {
		},
		onHide() {
		},
		data() {
			return {
				offset: 0,
				selectType:"",
				triggered: false,
				matchInfo:{},
				filters:[],
				matchUsers:[],
				isShowVip:true,
				latitude:'',
				longitude:'',
			};
		},
		created() {
			let that = this;
			EventBus.$on('vipPaySuccess', function(res) {
				this.showVip();
				this.getMatchCountInfo();
				this.getMatchInfoList();
			});
		},
		onLoad(option) {
			this.showVip();
			this.getMatchCountInfo();
			this.getMatchInfoList();
		},
		mounted() {
		},
		onShow() {
		},
		methods: {
			onRefresh() {
				console.log("onRefresh");
				this.triggered = true;
				this.offset = 0;
				this.getMatchInfoList();
			},
			onLoadMore(){
				console.log("onLoadMore");
				if(this.isShowVip){
					return;
				}
				this.offset += 1;
				this.getMatchInfoList();
			},
			getMatchInfoList(){
				getActivityParticipants({
					keyword:this.selectType,
					offset:this.offset,
					limit:25,
					latitude:this.latitude,
					longitude:this.longitude
					}).then((res) => {
					let that = this;
					that.triggered = false;
					if (res.status == 1) {
						if(that.selectType.length == 0){
							that.selectType = res.data["filters"][0]["key"];
						}
						that.filters = res.data["filters"];
						if(that.offset == 0){
							that.matchUsers = res.data["users"];
						}else{
							// that.matchUsers.push(res.data["users"]);
							that.matchUsers = that.matchUsers.concat(res.data["users"]);
						}
					}
				});
			},
			getMatchCountInfo(){
				getActivityInfo().then((res) => {
					if (res.status == 1) {
						let that = this;
						that.matchInfo = res.data;
					}	
				});
			},
			getIsSelect(title){
				return title == this.selectType;
			},
			clickTypeItem(info){
				this.selectType = info["key"];
				console.log(this.selectType);
				console.log("===",this.latitude);
				if(this.selectType == "nearby" && this.latitude == ""){
					this.get_address();
				}else{
					this.getMatchInfoList();
				}
			},
			getSexDes(info){
				var sexDes = info.sex == "F" ? "女" : "男";
				var ageDes = getAges(info.birthday ?? "");
				return sexDes + ageDes;
			},
			getInfoTags(info){
				var result = [];
				if(info.job.length > 0){
					result.push(info.job)
				}
				if(info.height.length > 0){
					result.push(info.height + "cm")
				}
				if(info.work_place.length > 0){
					result.push(info.work_place)
				}
				if(info.work_type.length > 0){
					result.push(info.work_type)
				}
				if(info.salary.length > 0){
					result.push(info.salary)
				}
				return result;
			},
			showVip(){
				let userInfo = getApp().globalData.userInfo || {};
				let vip = userInfo.vip || "-1";
				this.isShowVip = vip == "-1";
			},
			clickToVip(){
				uni.navigateTo({
					url: "/pageA/vip/vip",
				});
			},
			clickMatchCell(info){
				let url = "/pages/home2/detail2/detail2?user_id=" + info.user_id;
				uni.navigateTo({
					url: url,
				});
			},
			getSexImg(info){
				return info.sex == "F" ? ta_sex_woman : ta_sex_man;
			},
			getTaAges(birthday) {
			  let birthdayStr = birthday || "";
			  if (birthdayStr == "") {
			    return "";
			  } else {
			    return getAges(birthdayStr);
			  }
			},
			// 获取坐标
			get_address() {
				let that = this
				console.log("get_address")
				uni.getLocation({
					type: 'wgs84',
					success: function (res) { 
						console.log(res.latitude)
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.getMatchInfoList();
						updateLocationInfo({latitude:res.latitude,longitude:res.longitude})
					},
					fail: function(err) {
						console.log(err)
						that.getMatchInfoList();
					}
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.match-list-container{
		height: 100vh;
		
		.top-count-view{
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			
			.count-cell{
				width: 30vw;
				height: 30vw;
				margin: 20rpx 6rpx;
				position: relative;
				
				image{
					width: 30vw;
					height: 30vw;
				}
				
				.cell-content{
					position: absolute;
					top: 32rpx;
					left: 24rpx;
					color: #FFF;
					
					.top-title{
						font-size: 26rpx;
					}
					.people-view{
						display: flex;
						flex-direction: row;
						// justify-content: flex-start;
						align-items: flex-end;
						
						.people-count{
							font-size: 40rpx;
							font-weight: 500;
							margin-right: 4rpx;
							margin-top: 6rpx;
						}
						.people-title{
							font-size: 20rpx;
							padding-bottom: 10rpx;
						}
					}
				}		
			}
		}
		.type-tab-view{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			padding: 0 20rpx;
			height: 100rpx;
			white-space: nowrap;
			
			.type-tab-item{
				// display: inline-block;
				// width: 200rpx;
				margin-right: 32rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				.item-title{
					color: #666;
					font-size: 32rpx;
					font-weight: 400;
				}
				.item-title-active{
					color: #333;
					font-size: 36rpx;
					font-weight: 500;
				}
				.item-image{
					margin-top: -15rpx;
					height: 10rpx;
					width: 25rpx;
					image{
						height: 10rpx;
						width: 25rpx;
					}
				}
			}
		}
		.match-list-view{
			// height: 70vh;
			.list-cell{
				width: 96vw;
				// height: 250rpx;
				background: linear-gradient(156.95deg, #E2E8FF 14.92%, rgba(219, 199, 255, 0.08) 72.35%);
				// box-shadow: 0px 0px 8px rgba(0, 26, 118, 0.09);
				margin: 2vw;
				border-radius: 12rpx;
				position: relative;
				padding: 30rpx 32rpx;
				// padding-top: 50rpx;
				
				.vip-mark{
					position: absolute;
					left: 0;
					top: 0;
					width: 100rpx;
					height: 40rpx;
					image{
						width: 100rpx;
						height: 40rpx;
					}
				}
				
				.info-view{
					display: flex;
					position: relative;
					
					.distance-view{
						position: absolute;
						top: 0rpx;
						right: 0rpx;
						color: #666;
						font-size: 26rpx;
					}
					
					.avatar-view{
						image{
							width: 220rpx;
							height: 220rpx;
							border-radius: 10rpx;
						}
					}
					
					.right-view{
						margin-left: 20rpx;
						margin-top: 40rpx;
						display: flex;
						flex-direction: column;
						
						.top-view{
							display: flex;
							flex-direction: row;
							align-items: center;
							
							.nick-name{
								color: #333;
								font-size: 32rpx;
								font-weight: 500;
								margin-right: 8rpx;
							}
							.age-sex-c{
								// margin-top: 14rpx;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: center;
								padding: 0 10rpx;
								margin: 0 6rpx;
								background: rgba(74, 158, 255, 0.1);
								border-radius: 30rpx;
								height: 42rpx;
								.sex-img{
									width: 24rpx;
									height: 24rpx;
									margin-right: 4rpx;
								}
								.sex-title{
									font-weight: 400;
									font-size: 24rpx;
									line-height: 22rpx;
									letter-spacing: -0.3px;
									color: #4A9EFF;
								}
								.sex-woman-title{
									color: #FF5E98;
								}
							}
							.sex-tag{
								// height: 34rpx;
								margin-right: 8rpx;
								padding: 0 10rpx;
								
								border-style: solid;
								border-color: #ccc;
								border-width: 1rpx;
								border-radius: 4rpx;
								color: #666;
								font-size: 22rpx;
							}
							.cer-tag{
								width: 90rpx;
								height: 28rpx;
								image{
									width: 90rpx;
									height: 28rpx;
								}
							}
						}
						.tags-view{
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							margin-top: 20rpx;
							
							.tag-item{
								background-color: #6B6BE1;
								padding: 0 16rpx;
								color: #FFF;
								font-size: 22rpx;
								border-radius: 30rpx;
								opacity: 0.4;
								margin-right: 16rpx;
								margin-bottom: 10rpx;
							}
						}
					}
				}
				.des-view{
					display: flex;
					
					margin-top: 10rpx;
					color: #666;
					font-size: 25rpx;
					
					image{
						margin-top: 4rpx;
						margin-right: 6rpx;
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}
		.vip-tips{
			text-align: center;
			color: #FF5E6A;
			font-size: 26rpx;
			padding-top: 40rpx;
			padding-bottom: 140rpx;
		}
	}
</style>